﻿@model ContentItemEditModel
@{
    TempData["subMenu-check"] = new string[] { "CMS", "ManageCMS" };
    ViewData["Title"] = new string[] { (Model.ContentItemId > 0 ? "编辑" : "发布") + "视频" };
    var user = UserContext.CurrentUser;
    var contentCategory = ViewData.Get<ContentCategory>("contentCategory", new ContentCategory());
    var selectList = ViewData.Get<SelectList>("selectList", null);
    var videoAttachment = ViewData.Get<Attachment>("videoAttachment", null);
}

<div class="row tn-page-heading tn-mb-20">
    <div class="col-xs-12">
        <ol class="breadcrumb">
            <li><a href="@SiteUrls.Instance().ManageCMS()">资讯管理</a></li>
            @if (!string.IsNullOrEmpty(contentCategory.CategoryName))
            {
                <li><a href="@CachedUrlHelper.Action("ManageCMS","ControlPanel")?contentCategoryId=@contentCategory.CategoryId">@contentCategory.CategoryName</a></li>
            }
            <li class="tn-active">发布视频</li>
        </ol>
    </div>
</div>
<div class="panel panel-default tn-survey-form">
    <div class="panel-body">
        @using (Html.BeginForm("EditCMS", "ControlPanel", FormMethod.Post, new { @class = "form-horizontal tn-form-validation", @id = "EditCMS" }))
            {
            @Html.HiddenFor(n => n.ContentItemId)
            @Html.ValidationMessageFor(n => n.ContentItemId)
            @Html.HiddenFor(n => n.ContentModelId)
            @Html.ValidationMessageFor(n => n.ContentModelId)
            @Html.Hidden("Author", user.DisplayName)
            @Html.ValidationMessage("Author")
            @Html.Hidden("CategoryId", contentCategory.CategoryId)
            @Html.HiddenFor(n => n.BodyImageAttachmentId)
            @Html.ValidationMessageFor(n => n.BodyImageAttachmentId)
            <div class="form-group">
                <label class="col-xs-1 control-label tn-width-90">标题</label>
                <div class="col-xs-4">
                    @Html.TextBoxFor(n => n.Subject, new { @class = "form-control", @placeholder = "标题" })
                    @Html.ValidationMessageFor(n => n.Subject)
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label tn-width-90">视频封面</label>
                <div class="col-xs-2" id="UploadFileImgs">
                    <input type="hidden" name="FeaturedImageAttachmentId" value="@Model.FeaturedImageAttachmentId" />
                    @if (Model.FeaturedImageAttachmentId > 0)
                    {
                        <div class="tn-pic-attachment">
                            @if (new AttachmentService(TenantTypeIds.Instance().CMS_Video()).Get(Model.FeaturedImageAttachmentId) != null)
                            {
                                <img class="img-thumbnail img-responsive" src="@(new AttachmentService(TenantTypeIds.Instance().CMS_Video()).Get(Model.FeaturedImageAttachmentId).GetDirectlyUrl("Small"))" alt="...">
                            }
                            else
                            {
                                <img class="img-thumbnail img-responsive" src="" alt="...">
                            }
                            <button class="btn btn-default btn-xs btn-removeImage" type="button"><i class="fa fa-remove"></i></button>
                        </div>
                    }
                    else
                    {
                        @Html.FileUploader("UploadFileImg", TenantTypeIds.Instance().CMS_Video(), user.UserId, "+", extensions: "jpg,jpeg,png,bmp", associateId: Model.ContentItemId, callbacks: new { uploadSuccess = "succeedImageSyntony" })
                    }
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-1 control-label tn-width-90">视频文件</label>
                <div class="col-xs-4">
                    <div style="float:left;"> @Html.DropDownList("uploadvideo", selectList, new { @class = "form-control jn-select-sm" })</div>
                    @if (!(Model.ContentItemId > 0))
                    {
                        <div style="float:left;display:block;" id="upload">@Html.FileUploader("UploadFileVideo", TenantTypeIds.Instance().CMS_Video(), user.UserId, "上传文件", extensions: "mp4", callbacks: new { uploadSuccess = "succeedSyntony" })</div>
                        <div id="showvideo" style="display:none;" class="tn-file-attachment tn-mb-10">
                            <i class="fa fa-file-o"></i>
                            <label id="attname"></label>
                            <input type="hidden" name="attachmentId" />
                            <button class="btn btn-default btn-xs btn-removeVideo pull-right" type="button"><i class="fa fa-remove"></i></button>
                        </div>
                        <div style="float:left;display:none;" id="input">
                            @Html.TextBoxFor(n => n.VideoUrl, new { @class = "form-control", @style = "width:425px", @placeholder = "视频地址" })
                            @Html.ValidationMessageFor(n => n.VideoUrl)
                        </div>
                    }
                    else
                    {
                        if (Model.VideoUrl != null && Model.VideoUrl != "")
                        {
                            <div style="float:left;display:none;" id="upload"></div>
                            <div id="showvideo" style="display:none;" class="tn-file-attachment tn-mb-10">
                                <i class="fa fa-file-o"></i>
                                <label id="attname"></label>
                                <input type="hidden" name="attachmentId" />
                                <button class="btn btn-default btn-xs btn-removeVideo pull-right" type="button"><i class="fa fa-remove"></i></button>
                            </div>
                            <div style="float:left;display:block;" id="input">
                                @Html.TextBoxFor(n => n.VideoUrl, new { @class = "form-control", @style = "width:425px", @placeholder = "视频地址" })
                                @Html.ValidationMessageFor(n => n.VideoUrl)
                            </div>
                        }
                        else
                        {
                            <div style="float:left;display:block;" id="upload">@Html.FileUploader("UploadFileVideo", TenantTypeIds.Instance().CMS_Video(), user.UserId, "上传文件", extensions: "mp4", callbacks: new { uploadSuccess = "succeedSyntony" })</div>
                            if (videoAttachment != null)
                            {

                                <div id="showvideo" class="tn-file-attachment tn-mb-10">
                                    <i class="fa fa-file-o"></i>
                                    <label id="attname">@videoAttachment.FriendlyFileName</label>
                                    <input type="hidden" name="attachmentId" value="@videoAttachment.AttachmentId" />
                                    <button class="btn btn-default btn-xs btn-removeVideo pull-right" type="button"><i class="fa fa-remove"></i></button>
                                </div>
                            }
                            <div style="float:left;display:none;" id="input">
                                @Html.TextBoxFor(n => n.VideoUrl, new { @class = "form-control", @style = "width:425px", @placeholder = "视频地址" })
                                @Html.ValidationMessageFor(n => n.VideoUrl)
                            </div>
                        }
                    }
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-1 control-label tn-width-90">视频介绍</label>
                <div class="col-xs-4">
                    @Html.TextAreaFor(n => n.Summary, new { @class = "form-control", @placeholder = "视频介绍", @rows = "4", @maxlength = 510 })
                    @Html.ValidationMessageFor(n => n.Summary)
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-1 control-label tn-width-90">所属栏目</label>
                <div class="col-xs-3">
                    @Html.TextBox("CategoryId", contentCategory.CategoryName, new { @disabled = "", @class = "form-control jn-select-sm" })
                    @Html.ValidationMessage("CategoryId")
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label tn-width-90">发布时间</label>
                <div class="col-xs-3">
                    <div class="has-feedback">
                        @Html.DateTimePickerFor(n => n.DatePublished, new DateTimePicker { EnabledTime = true })
                        <span class="form-control-feedback" style="right:0px;"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-xs-2 control-label tn-width-90">设置</label>
                <div class="col-xs-8">
                    <label class="checkbox-inline">
                        <input value="true" name="IsComment" type="checkbox" @(Model.IsComment ? "checked" : "")>
                        禁止评论
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-1 col-xs-8">
                    <button id="answer" type="button" class="btn btn-primary btn-submit tn-btn-wp">确定</button>
                    <a type="button" class="btn btn-default tn-btn-wp" href="@CachedUrlHelper.Action("ManageCMS","ControlPanel")?contentCategoryId=@contentCategory.CategoryId">取消</a>
                </div>
            </div>
        }
    </div>
</div>


@Styles.Render("~/Bundle/Styles/daterangepicker")
@Styles.Render("~/Bundle/Styles/Uploader")

<script>
    require(['jquery', 'datepicker', 'uploader', 'tnlayer', 'validate.unobtrusive'], function () {

        function haveContent() {
            if ($("#Subject").val().length > 0) { return true; }
            if ($("#attname").text().length > 0) { return true; }
            if ($("#Summary").val().length > 0) { return true; }
            if ($("[name='FeaturedImageAttachmentId']").val().length > 0 && parseInt($("[name='FeaturedImageAttachmentId']").val()) > 0) { return true; }
            return false;
        }
        $(window).bind('beforeunload', function () {
            if (!haveContent()) { beforeunloadn() }
            else
            {
                return "离开后页面上的内容将不会被保存，确定要离开么？";
            }
        });
        function beforeunloadn() {
            $(window).unbind('beforeunload');//取消提醒
        }
        //视频上传方式
        $(document).on("change", "#uploadvideo", function () {
            if (this.value == "0") {
                var temp = '@Html.FileUploader("UploadFileVideo", TenantTypeIds.Instance().CMS_Video(), user.UserId, "上传文件", extensions: "mp4", callbacks: new { uploadSuccess = "succeedSyntony" })';
                $("#upload").append(temp);
                $("#upload").show();
                $("#input").hide();
            }
            if (this.value == "1") {
                $("#input").show();
                $("#upload").text("");
                $("#showvideo").hide();
            }

        })
        //提交表单
        $('.btn-submit').on('click', function () {
            beforeunloadn()
            //判断视频是否上传
            var o = $("#input").css("display");
            if (o == "none") {
                $("#VideoUrl").val("");
                if ($("#attname").text() == "") {
                    layer.msg("请上传视频", {
                        icon: 2
                    });
                }
                else {
                    if ($("[name='FeaturedImageAttachmentId']").val() == "0") {
                        layer.msg("请上传视频封面", {
                            icon: 2
                        });
                    }
                    else {
                        operateAttachment();
                        $('#EditCMS').submit();
                    }
                }
            }
            else {
                if ($("[name='FeaturedImageAttachmentId']").val() == "0") {
                    layer.msg("请上传视频封面", {
                        icon: 2
                    });
                }
                else {
                    operateAttachment();
                    $('#EditCMS').submit();
                }
            }

        });

        function operateAttachment() {
            var bodyImageId = $("#BodyImageAttachmentId");
            var bodyImageIds = [];
            var imgIds = "";
            //视频
            bodyImageIds.push($('input[name=attachmentId]').val());
            //标题图
            bodyImageIds.push($("[name='FeaturedImageAttachmentId']").val());
            bodyImageId.val(bodyImageIds.join(','));
        }
        //上传成功回调
        $.fn.succeedSyntony = function (file, data) {
            $('#attname').text(data.Name);
            $('input[name=attachmentId]').val(data.id);
            $('#showvideo').show();
        }

        //上传成功回调
        $.fn.succeedImageSyntony = function (file, data) {
            var $this = $("#UploadFileImgs");
            var itemTmpl = '<div class="tn-pic-attachment">\
                                <img class="img-thumbnail img-responsive" src="' + data.path + '" alt="...">\
                                <button class="btn btn-default btn-xs btn-removeImage" type="button"><i class="fa fa-remove"></i></button>\
                                </div>';

            $this.append(itemTmpl);
            var uploadFileInput = $("[name='FeaturedImageAttachmentId']");
            uploadFileInput.val(data.id);
            $this.find("div[id^='uploader-UploadFile']").remove();
        }


        //移除标题图
        $(document).on('click', '.btn-removeImage', function () {
            var temp = '@Html.FileUploader("UploadFile", TenantTypeIds.Instance().CMS_Video(), user.UserId, "+", extensions: "jpg,jpeg,png,bmp", associateId: Model.ContentItemId, callbacks: new { uploadSuccess = "succeedImageSyntony" })';
            var $this = $(this);
            var uploadFileInput = $("[name='FeaturedImageAttachmentId']");
            uploadFileInput.val("0")
            $this.parent().parent().append(temp);
            $this.parent().remove();
        });

        //移除视频
        $(document).on('click', '.btn-removeVideo', function () {
            $('#showvideo').hide();
        });

    })
</script>
